export {}

// 小案例

// 1. 封装一个格式化时间的函数
// 如果不传时间,默认取调用函数的时间 入参是  时间或者字符串 可以不传 返回的数据是 字符串
const formatTime = (date?: Date | string) => {
  // 做个判断 有没有传入时间
  if (!date) date = new Date()
  if (typeof date === 'string') date = new Date(date)
  // 获取小时
  const h = date.getHours()
  // 获取分钟
  const m = date.getMinutes()
  // 获取秒
  const s = date.getSeconds()
  // 最后拼接返回个字符串
  return `${h}:${m}:${s}`
}

const str = formatTime()
console.log(str)

// 2. 定义访问记录的数据   每一项是个对象 对象里有次数和时间
type Data = {
  count: number
  time: string
}
type List = Array<Data>

const KEY = 'ts-demo-data'
// 3.设置历史记录
const updateData = () => {
  // 先从本地拿本地缓存数据
  const list = getData()
  // 或取最后一项
  const  lastItem = list[list.length - 1]
  list.push({
    count: lastItem ? lastItem.count + 1 : 1,
    time: formatTime()
  })
  // 数据设置好之后还需要存到本地
  localStorage.setItem(KEY, JSON.stringify(list))
}


// 4.获取历史记录
const getData = () => {
  // 从localStorage里取值
  const str = localStorage.getItem(KEY)
  // 通过JSON.parse解析json为数组
  return JSON.parse(str || '[]') as List
}

// 5. 封装一个展示历史记录渲染在页面上的函数
const render = () => {
  // 先更新数据
  updateData()
  // 获取数据
  const data = getData()
  // 渲染在页面上
  // 先获取到dom节点
  const app = document.getElementById('app') as HTMLDivElement
  // 将获取的数组处理成字符串  再通过innerHTML渲染在页面上
  const arr = data.map((item) => {
    return `次数:${item.count}, 时间: ${item.time}`
  })
  console.log(arr)
  const str = arr.join('<br/>')
  console.log(str)
  app.innerHTML = str
}

render()